<template>
	<view class="chimp-container">
		<!-- 游戏状态：说明 -->
		<view v-if="gameState === 'instruction'" class="instruction-section">
			<view class="title">黑猩猩测试</view>
			<view class="instruction-content">
				<view class="instruction-item">
					<text class="icon">🐵</text>
					<text class="text">记住屏幕上数字的位置</text>
				</view>
				<view class="instruction-item">
					<text class="icon">👀</text>
					<text class="text">数字会在短时间后消失</text>
				</view>
				<view class="instruction-item">
					<text class="icon">👆</text>
					<text class="text">按从小到大的顺序点击方块</text>
				</view>
				<view class="instruction-item">
					<text class="icon">🏆</text>
					<text class="text">挑战你的视觉记忆极限</text>
				</view>
			</view>
			
			<view class="difficulty-selector">
				<view class="difficulty-title">选择难度</view>
				<view class="difficulty-options">
					<view 
						v-for="level in difficultyLevels" 
						:key="level.value"
						:class="['difficulty-option', { active: selectedDifficulty === level.value }]"
						@click="selectDifficulty(level.value)"
					>
						<view class="difficulty-name">{{ level.name }}</view>
						<view class="difficulty-desc">{{ level.desc }}</view>
					</view>
				</view>
			</view>
			
			<button class="start-btn" @click="startGame">开始测试</button>
		</view>
		
		<!-- 游戏状态：准备 -->
		<view v-if="gameState === 'ready'" class="ready-section">
			<view class="ready-title">准备开始</view>
			<view class="ready-info">
				<view class="level-info">第 {{ currentLevel }} 轮</view>
				<view class="numbers-info">需要记忆 {{ currentNumbers.length }} 个数字</view>
			</view>
			<view class="countdown">{{ countdown }}</view>
		</view>
		
		<!-- 游戏状态：显示数字 -->
		<view v-if="gameState === 'showing'" class="showing-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 轮</view>
				<view class="time-left">{{ Math.ceil(showTimeLeft / 1000) }}s</view>
			</view>
			
			<view class="instruction-text">仔细记住数字的位置</view>
			
			<view class="game-grid" :data-grid-size="currentDifficulty.gridSize">
				<view 
					v-for="(cell, index) in gameGrid" 
					:key="index"
					:class="['grid-cell', { 'has-number': cell.hasNumber }]"
					:style="{ 
						backgroundColor: cell.hasNumber ? '#4CAF50' : '#E0E0E0',
						color: cell.hasNumber ? '#fff' : 'transparent'
					}"
				>
					{{ cell.hasNumber ? cell.number : '' }}
				</view>
			</view>
		</view>
		
		<!-- 游戏状态：用户输入 -->
		<view v-if="gameState === 'input'" class="input-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 轮</view>
				<view class="progress-info">
					{{ userClicks.length }} / {{ currentNumbers.length }}
				</view>
			</view>
			
			<view class="instruction-text">按从小到大的顺序点击方块</view>
			
			<view class="game-grid" :data-grid-size="currentDifficulty.gridSize">
				<view 
					v-for="(cell, index) in gameGrid" 
					:key="index"
					:class="['grid-cell', 'clickable', {
						'has-number': cell.hasNumber,
						'clicked': cell.clicked,
						'correct': cell.clicked && cell.correctClick,
						'wrong': cell.clicked && !cell.correctClick
					}]"
					:style="{ 
						backgroundColor: getGridCellColor(cell),
						color: cell.clicked && cell.hasNumber ? '#fff' : 'transparent'
					}"
					@click="clickCell(index)"
				>
					{{ cell.clicked && cell.hasNumber ? cell.number : '' }}
				</view>
			</view>
			
			<view class="input-actions">
				<button class="action-btn secondary" @click="resetInput" :disabled="userClicks.length === 0">
					重置
				</button>
				<button class="action-btn secondary" @click="showHint">
					提示
				</button>
			</view>
		</view>
		
		<!-- 游戏状态：结果 -->
		<view v-if="gameState === 'result'" class="result-section">
			<view class="result-header">
				<view class="result-icon">{{ isCorrect ? '🎉' : '😔' }}</view>
				<view class="result-title">{{ isCorrect ? '答对了！' : '答错了！' }}</view>
			</view>
			
			<view class="result-grid">
				<view class="grid-title">正确答案：</view>
				<view class="mini-grid">
					<view 
						v-for="(cell, index) in gameGrid" 
						:key="index"
						:class="['mini-cell', { 'has-number': cell.hasNumber }]"
						:style="{ 
							backgroundColor: cell.hasNumber ? '#4CAF50' : '#E0E0E0',
							color: cell.hasNumber ? '#fff' : 'transparent'
						}"
					>
						{{ cell.hasNumber ? cell.number : '' }}
					</view>
				</view>
			</view>
			
			<view class="accuracy-display" v-if="!isCorrect">
				<view class="accuracy-title">准确率分析</view>
				<view class="accuracy-rate">准确率：{{ Math.round(accuracy * 100) }}%</view>
				<view class="accuracy-detail">正确点击：{{ correctClicks }} / {{ currentNumbers.length }}</view>
			</view>
			
			<view class="result-stats">
				<view class="stat-item">
					<view class="stat-value">{{ currentLevel }}</view>
					<view class="stat-label">当前轮次</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ score }}</view>
					<view class="stat-label">当前得分</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ Math.round(reactionTime) }}ms</view>
					<view class="stat-label">平均反应时间</view>
				</view>
			</view>
			
			<view class="result-actions">
				<button v-if="isCorrect" class="action-btn primary" @click="nextLevel">
					下一轮
				</button>
				<button v-else class="action-btn secondary" @click="retryLevel">
					重试
				</button>
				<button class="action-btn secondary" @click="endGame">
					结束游戏
				</button>
			</view>
		</view>
		
		<!-- 游戏状态：最终结果 -->
		<view v-if="gameState === 'final'" class="final-section">
			<view class="final-header">
				<view class="final-icon">🏆</view>
				<view class="final-title">测试完成</view>
				<view class="final-subtitle">{{ getFinalMessage() }}</view>
			</view>
			
			<view class="final-stats">
				<view class="final-stat-item">
					<view class="final-stat-value">{{ maxLevel }}</view>
					<view class="final-stat-label">最高轮次</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ finalScore }}</view>
					<view class="final-stat-label">最终得分</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ Math.round(averageReactionTime) }}ms</view>
					<view class="final-stat-label">平均反应时间</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ getGrade() }}</view>
					<view class="final-stat-label">评级</view>
				</view>
			</view>
			
			<view class="performance-analysis">
				<view class="analysis-title">表现分析</view>
				<view class="analysis-content">
					<view class="analysis-item">
						<text class="analysis-label">视觉记忆：</text>
						<text class="analysis-value">{{ getMemoryRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">反应速度：</text>
						<text class="analysis-value">{{ getSpeedRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">准确程度：</text>
						<text class="analysis-value">{{ getAccuracyRating() }}</text>
					</view>
				</view>
			</view>
			
			<view class="final-actions">
				<button class="action-btn primary" @click="restartGame">再次测试</button>
				<button class="action-btn secondary" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 游戏状态
const gameState = ref('instruction') // instruction, ready, showing, input, result, final
const selectedDifficulty = ref('normal')
const currentLevel = ref(1)
const maxLevel = ref(1)
const score = ref(0)
const finalScore = ref(0)
const isCorrect = ref(false)
const countdown = ref(3)
const accuracy = ref(0)
const correctClicks = ref(0)

// 游戏网格和数字
const gameGrid = ref([])
const currentNumbers = ref([])
const userClicks = ref([])
const showTimeLeft = ref(0)

// 时间相关
const reactionTime = ref(0)
const averageReactionTime = ref(0)
const reactionTimes = ref([])
const inputStartTime = ref(0)
const clickTimes = ref([])

// 定时器
let countdownTimer = null
let showTimer = null
let gameTimer = null

// 难度配置
const difficultyLevels = ref([
	{
		value: 'easy',
		name: '简单',
		desc: '4×4网格，3-5个数字，显示3秒',
		gridSize: 4,
		startNumbers: 3,
		maxNumbers: 5,
		showTime: 3000, // 毫秒
		increment: 1
	},
	{
		value: 'normal',
		name: '普通',
		desc: '5×5网格，4-7个数字，显示2.5秒',
		gridSize: 5,
		startNumbers: 4,
		maxNumbers: 7,
		showTime: 2500, // 毫秒
		increment: 1
	},
	{
		value: 'hard',
		name: '困难',
		desc: '6×6网格，5-10个数字，显示2秒',
		gridSize: 6,
		startNumbers: 5,
		maxNumbers: 10,
		showTime: 2000, // 毫秒
		increment: 1
	}
])

// 当前难度配置
const currentDifficulty = computed(() => {
	return difficultyLevels.value.find(d => d.value === selectedDifficulty.value)
})

// 生成游戏网格
const generateGrid = () => {
	const difficulty = currentDifficulty.value
	const gridSize = difficulty.gridSize
	const totalCells = gridSize * gridSize
	
	// 计算当前轮次需要的数字数量
	const baseNumbers = difficulty.startNumbers
	const extraNumbers = Math.min((currentLevel.value - 1) * difficulty.increment, difficulty.maxNumbers - baseNumbers)
	const numbersCount = baseNumbers + extraNumbers
	
	// 初始化网格
	const grid = Array(totalCells).fill().map(() => ({
		hasNumber: false,
		number: 0,
		clicked: false,
		correctClick: false
	}))
	
	// 随机选择位置放置数字
	const positions = []
	while (positions.length < numbersCount) {
		const pos = Math.floor(Math.random() * totalCells)
		if (!positions.includes(pos)) {
			positions.push(pos)
		}
	}
	
	// 在选定位置放置数字
	positions.forEach((pos, index) => {
		grid[pos] = {
			hasNumber: true,
			number: index + 1,
			clicked: false,
			correctClick: false
		}
	})
	
	gameGrid.value = grid
	currentNumbers.value = positions.map((pos, index) => ({ pos, number: index + 1 }))
}

// 获取网格单元格颜色
const getGridCellColor = (cell) => {
	if (cell.clicked) {
		if (cell.correctClick) return '#4CAF50' // 绿色 - 正确
		else return '#F44336' // 红色 - 错误
	}
	return cell.hasNumber ? '#E0E0E0' : '#F5F5F5' // 灰色
}

// 选择难度
const selectDifficulty = (difficulty) => {
	selectedDifficulty.value = difficulty
}

// 开始游戏
const startGame = () => {
	resetGame()
	startLevel()
}

// 重置游戏
const resetGame = () => {
	currentLevel.value = 1
	maxLevel.value = 1
	score.value = 0
	reactionTimes.value = []
	clickTimes.value = []
	clearAllTimers()
}

// 开始关卡
const startLevel = () => {
	gameState.value = 'ready'
	generateGrid()
	userClicks.value = []
	clickTimes.value = []
	
	// 倒计时
	countdown.value = 3
	countdownTimer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(countdownTimer)
			showNumbers()
		}
	}, 1000)
}

// 显示数字
const showNumbers = () => {
	gameState.value = 'showing'
	showTimeLeft.value = currentDifficulty.value.showTime
	
	// 显示倒计时
	showTimer = setInterval(() => {
		showTimeLeft.value -= 100
		if (showTimeLeft.value <= 0) {
			clearInterval(showTimer)
			startInput()
		}
	}, 100)
}

// 开始输入阶段
const startInput = () => {
	gameState.value = 'input'
	inputStartTime.value = Date.now()
}

// 点击网格单元格
const clickCell = (index) => {
	if (gameGrid.value[index].clicked) return
	
	const clickTime = Date.now()
	clickTimes.value.push(clickTime - inputStartTime.value)
	
	// 标记为已点击
	gameGrid.value[index].clicked = true
	userClicks.value.push(index)
	
	// 检查是否正确
	const expectedNumber = userClicks.value.length
	const isCorrectClick = gameGrid.value[index].hasNumber && gameGrid.value[index].number === expectedNumber
	gameGrid.value[index].correctClick = isCorrectClick
	
	// 如果点击错误，立即结束
	if (!isCorrectClick) {
		setTimeout(() => {
			submitInput()
		}, 500)
		return
	}
	
	// 如果完成所有点击，自动提交
	if (userClicks.value.length === currentNumbers.value.length) {
		setTimeout(() => {
			submitInput()
		}, 500)
	}
}

// 重置输入
const resetInput = () => {
	userClicks.value = []
	clickTimes.value = []
	gameGrid.value.forEach(cell => {
		cell.clicked = false
		cell.correctClick = false
	})
	inputStartTime.value = Date.now()
}

// 显示提示
const showHint = () => {
	// 短暂显示所有数字位置
	gameGrid.value.forEach(cell => {
		if (cell.hasNumber && !cell.clicked) {
			cell.showHint = true
		}
	})
	
	setTimeout(() => {
		gameGrid.value.forEach(cell => {
			cell.showHint = false
		})
	}, 1000)
}

// 提交输入
const submitInput = () => {
	const endTime = Date.now()
	reactionTime.value = clickTimes.value.length > 0 ? clickTimes.value.reduce((a, b) => a + b, 0) / clickTimes.value.length : 0
	reactionTimes.value.push(reactionTime.value)
	
	// 检查答案
	correctClicks.value = 0
	for (let i = 0; i < userClicks.value.length; i++) {
		const clickedIndex = userClicks.value[i]
		const expectedNumber = i + 1
		if (gameGrid.value[clickedIndex].hasNumber && gameGrid.value[clickedIndex].number === expectedNumber) {
			correctClicks.value++
		}
	}
	
	isCorrect.value = correctClicks.value === currentNumbers.value.length
	accuracy.value = correctClicks.value / currentNumbers.value.length
	
	// 计算得分
	if (isCorrect.value) {
		const baseScore = currentLevel.value * 100
		const numbersBonus = currentNumbers.value.length * 50
		const speedBonus = Math.max(0, 10000 - reactionTime.value) / 50
		const difficultyMultiplier = selectedDifficulty.value === 'easy' ? 1 : selectedDifficulty.value === 'normal' ? 1.5 : 2
		score.value += Math.round((baseScore + numbersBonus + speedBonus) * difficultyMultiplier)
	} else {
		// 部分分数基于准确率
		const partialScore = Math.round(accuracy.value * currentLevel.value * 80)
		score.value += partialScore
	}
	
	gameState.value = 'result'
}

// 下一关
const nextLevel = () => {
	currentLevel.value++
	maxLevel.value = Math.max(maxLevel.value, currentLevel.value)
	startLevel()
}

// 重试关卡
const retryLevel = () => {
	startLevel()
}

// 结束游戏
const endGame = () => {
	finalScore.value = score.value
	averageReactionTime.value = reactionTimes.value.reduce((a, b) => a + b, 0) / reactionTimes.value.length || 0
	gameState.value = 'final'
	saveGameData()
}

// 重新开始游戏
const restartGame = () => {
	gameState.value = 'instruction'
	resetGame()
}

// 返回首页
const goHome = () => {
	uni.navigateBack()
}

// 获取最终消息
const getFinalMessage = () => {
	if (maxLevel.value >= 15) return '视觉记忆大师！'
	if (maxLevel.value >= 10) return '记忆力超群！'
	if (maxLevel.value >= 7) return '表现不错！'
	if (maxLevel.value >= 5) return '还需努力！'
	return '继续加油！'
}

// 获取评级
const getGrade = () => {
	if (maxLevel.value >= 15) return 'S+'
	if (maxLevel.value >= 12) return 'S'
	if (maxLevel.value >= 9) return 'A'
	if (maxLevel.value >= 7) return 'B'
	if (maxLevel.value >= 5) return 'C'
	return 'D'
}

// 获取记忆能力评级
const getMemoryRating = () => {
	if (maxLevel.value >= 15) return '超凡'
	if (maxLevel.value >= 12) return '优秀'
	if (maxLevel.value >= 9) return '良好'
	if (maxLevel.value >= 6) return '一般'
	return '需要提高'
}

// 获取反应速度评级
const getSpeedRating = () => {
	if (averageReactionTime.value < 800) return '很快'
	if (averageReactionTime.value < 1200) return '较快'
	if (averageReactionTime.value < 1800) return '一般'
	return '较慢'
}

// 获取准确程度评级
const getAccuracyRating = () => {
	const totalAccuracy = reactionTimes.value.length > 0 ? (score.value / (maxLevel.value * 400)) : 0
	if (totalAccuracy >= 0.9) return '极高'
	if (totalAccuracy >= 0.7) return '很好'
	if (totalAccuracy >= 0.5) return '良好'
	if (totalAccuracy >= 0.3) return '一般'
	return '需要提高'
}

// 保存游戏数据
const saveGameData = () => {
	const gameData = {
		date: new Date().toISOString(),
		difficulty: selectedDifficulty.value,
		maxLevel: maxLevel.value,
		finalScore: finalScore.value,
		averageReactionTime: averageReactionTime.value,
		grade: getGrade()
	}
	
	// 获取历史数据
	const historyKey = 'chimp_test_history'
	let history = []
	try {
		const stored = uni.getStorageSync(historyKey)
		if (stored) {
			history = JSON.parse(stored)
		}
	} catch (e) {
		console.error('读取历史数据失败:', e)
	}
	
	// 添加新记录
	history.unshift(gameData)
	
	// 只保留最近50条记录
	if (history.length > 50) {
		history = history.slice(0, 50)
	}
	
	// 保存数据
	try {
		uni.setStorageSync(historyKey, JSON.stringify(history))
	} catch (e) {
		console.error('保存历史数据失败:', e)
	}
}

// 清除所有定时器
const clearAllTimers = () => {
	if (countdownTimer) {
		clearInterval(countdownTimer)
		countdownTimer = null
	}
	if (showTimer) {
		clearInterval(showTimer)
		showTimer = null
	}
	if (gameTimer) {
		clearTimeout(gameTimer)
		gameTimer = null
	}
}

// 组件卸载时清理
onUnmounted(() => {
	clearAllTimers()
})
</script>

<style lang="scss" scoped>
.chimp-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #FF9A8B 0%, #A8E6CF 100%);
	padding: 40rpx 30rpx;
	color: white;
}

// 说明页面样式
.instruction-section {
	text-align: center;
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
		color: #fff;
	}
	
	.instruction-content {
		margin-bottom: 60rpx;
		
		.instruction-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.icon {
				font-size: 36rpx;
				margin-right: 20rpx;
			}
			
			.text {
				font-size: 28rpx;
				flex: 1;
				text-align: left;
			}
		}
	}
	
	.difficulty-selector {
		margin-bottom: 60rpx;
		
		.difficulty-title {
			font-size: 32rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
		}
		
		.difficulty-options {
			display: flex;
			gap: 20rpx;
			
			.difficulty-option {
				flex: 1;
				padding: 30rpx 20rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 15rpx;
				border: 2rpx solid transparent;
				transition: all 0.3s;
				
				&.active {
					background: rgba(255, 255, 255, 0.2);
					border-color: #fff;
					transform: scale(1.05);
				}
				
				.difficulty-name {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.difficulty-desc {
					font-size: 22rpx;
					opacity: 0.8;
				}
			}
		}
	}
	
	.start-btn {
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(45deg, #ff6b6b, #ee5a24);
		color: white;
		border: none;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		transition: all 0.3s;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
		}
	}
}

// 准备页面样式
.ready-section {
	text-align: center;
	padding-top: 200rpx;
	
	.ready-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
	}
	
	.ready-info {
		margin-bottom: 80rpx;
		
		.level-info {
			font-size: 36rpx;
			margin-bottom: 20rpx;
			color: #ffd700;
		}
		
		.numbers-info {
			font-size: 28rpx;
			opacity: 0.8;
		}
	}
	
	.countdown {
		font-size: 120rpx;
		font-weight: bold;
		color: #ffd700;
		animation: pulse 1s infinite;
	}
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

// 显示和输入页面样式
.showing-section, .input-section {
	.game-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.level-indicator {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffd700;
		}
		
		.time-left, .progress-info {
			font-size: 28rpx;
			color: #ffd700;
			font-weight: bold;
		}
	}
	
	.instruction-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 40rpx;
		opacity: 0.9;
	}
	
	.game-grid {
		display: grid;
		gap: 15rpx;
		margin: 0 auto 40rpx;
		max-width: 600rpx;
		grid-template-columns: repeat(4, 1fr); // 默认4x4
		
		// 使用CSS变量来动态设置网格列数
		&[data-grid-size="4"] {
			grid-template-columns: repeat(4, 1fr);
		}
		&[data-grid-size="5"] {
			grid-template-columns: repeat(5, 1fr);
		}
		&[data-grid-size="6"] {
			grid-template-columns: repeat(6, 1fr);
		}
		
		.grid-cell {
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			font-size: 32rpx;
			font-weight: bold;
			box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
			transition: all 0.3s;
			border: 3rpx solid transparent;
			
			&.clickable {
				cursor: pointer;
				
				&:active {
					transform: scale(0.95);
				}
			}
			
			&.has-number {
				color: white;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
			
			&.clicked {
				transform: scale(1.05);
				box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.5);
			}
			
			&.correct {
				border-color: #4CAF50;
				box-shadow: 0 0 20rpx rgba(76, 175, 80, 0.6);
			}
			
			&.wrong {
				border-color: #F44336;
				box-shadow: 0 0 20rpx rgba(244, 67, 54, 0.6);
				animation: shake 0.5s;
			}
		}
	}
	
	.input-actions {
		display: flex;
		justify-content: center;
		gap: 20rpx;
	}
}



@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5rpx); }
	75% { transform: translateX(5rpx); }
}

// 结果页面样式
.result-section {
	text-align: center;
	
	.result-header {
		margin-bottom: 40rpx;
		
		.result-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		.result-title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	
	.result-grid {
		margin-bottom: 40rpx;
		
		.grid-title {
			font-size: 24rpx;
			margin-bottom: 20rpx;
			opacity: 0.8;
		}
		
		.mini-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 8rpx;
			max-width: 300rpx;
			margin: 0 auto;
			
			.mini-cell {
				aspect-ratio: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-weight: bold;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
			}
		}
	}
	
	.accuracy-display {
		margin-bottom: 40rpx;
		
		.accuracy-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 15rpx;
		}
		
		.accuracy-rate {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffd700;
			margin-bottom: 10rpx;
		}
		
		.accuracy-detail {
			font-size: 24rpx;
			opacity: 0.8;
		}
	}
	
	.result-stats {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		
		.stat-item {
			text-align: center;
			
			.stat-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.stat-label {
				font-size: 22rpx;
				opacity: 0.8;
			}
		}
	}
	
	.result-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 最终结果页面样式
.final-section {
	text-align: center;
	
	.final-header {
		margin-bottom: 60rpx;
		
		.final-icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
		}
		
		.final-title {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.final-subtitle {
			font-size: 32rpx;
			color: #ffd700;
		}
	}
	
	.final-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		margin-bottom: 60rpx;
		
		.final-stat-item {
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.final-stat-value {
				font-size: 48rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.final-stat-label {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}
	}
	
	.performance-analysis {
		margin-bottom: 60rpx;
		
		.analysis-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		
		.analysis-content {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			padding: 30rpx;
			
			.analysis-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.analysis-label {
					font-size: 28rpx;
				}
				
				.analysis-value {
					font-size: 28rpx;
					font-weight: bold;
					color: #ffd700;
				}
			}
		}
	}
	
	.final-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 通用按钮样式
.action-btn {
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	font-weight: bold;
	border: none;
	transition: all 0.3s;
	min-width: 120rpx;
	
	&.primary {
		background: linear-gradient(45deg, #4caf50, #45a049);
		color: white;
		box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.4);
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
		}
	}
	
	&.secondary {
		background: rgba(255, 255, 255, 0.2);
		color: white;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		
		&:active {
			background: rgba(255, 255, 255, 0.3);
		}
		
		&:disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}
}
</style>
